import { Tree } from 'antd';

const { TreeNode } = Tree;

const x = 3;
const y = 2;
const z = 1;
var gData = [];

const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || '0';
  const tns = _tns || gData;

  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
const test = generateData(z);
console.log(test);

export default class DistrictTree extends React.Component {
  state = {
    gData,
    expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
  }

  componentDidMount() {
    this.loadTreeData();
  }
  loadTreeData=()=>{
      var treeData = [];
      treeData.push({title:"莼湖派出所", key:"012",children:[{title:"莼湖爱情公寓", key:"0001", IP:"33.101.61.37", port:37777, username:"admin", password:"admin123"}]});
      treeData[0].children.push({title:"莼湖滨海新区中石化加油站", key:"0002", IP:"33.101.61.34", port:37777, username:"admin", password:"admin123"});
      treeData[0].children.push({title:"莼湖陆角山村BP加油站", key:"0003", IP:"33.101.61.31", port:37777, username:"admin", password:"admin123"});
      treeData[0].children.push({title:"莼湖下陈加油站", key:"0004", IP:"33.101.61.28", port:37777, username:"admin", password:"admin123"});
      treeData[0].children.push({title:"莼湖吉奇加油站", key:"0005", IP:"33.101.61.25", port:37777, username:"admin", password:"admin123"});
      treeData.push({title:"大堰派出所", key:"002",children:[{title:"乡村旅游经营有限公司", key:"0006", IP:"33.101.87.207", port:37777, username:"admin", password:"admin123"}]});
      treeData[1].children.push({title:"大堰奉化明湖山庄", key:"0007", IP:"33.101.87.204", port:37777, username:"admin", password:"admin123"});
      treeData[1].children.push({title:"大堰奉化闲听鱼语民宿客栈", key:"0008", IP:"33.101.87.201", port:37777, username:"admin", password:"admin123"});
      treeData[1].children.push({title:"大堰奉化青柏餐馆", key:"0009", IP:"33.101.87.198", port:37777, username:"admin", password:"admin123"});
      treeData[1].children.push({title:"大堰奉化大堰百汇餐馆", key:"0010", IP:"33.101.87.195", port:37777, username:"admin", password:"admin123"});
      //this.state.gData = treeData;
      this.setState({
        gData: treeData,
      })
      console.log(this.state.gData);

  }
  onDragEnter = (info) => {
    console.log(info);
    // expandedKeys 需要受控时设置
    // this.setState({
    //   expandedKeys: info.expandedKeys,
    // });
  }
  treeNodeSelect=(info)=>{
    const treeId = info[0];
    const treeNodeInfo = this.getTreeNodeInfo(treeId, this.state.gData);
    console.log(treeNodeInfo.IP);
    if(treeNodeInfo.IP){
        const iframe = document.getElementById("videoIframe").contentWindow;
        const index = iframe.GetSelPlayIndex();
        console.log(index);
        iframe.Play(0, treeNodeInfo.IP, treeNodeInfo.port, treeNodeInfo.username, treeNodeInfo.password);
    }
  }

  getTreeNodeInfo=(treeId, tree)=>{
      for(var i = 0;i < tree.length;i++){
          if(treeId == tree[i].key){
              return tree[i];
          }
          if(tree[i].children && tree[i].children.length>0){
            return this.getTreeNodeInfo(treeId, tree[i].children);
          }
      }
      return null;
  }

  onDrop = (info) => {
    console.log(info);
    const dropKey = info.node.props.eventKey;
    const dragKey = info.dragNode.props.eventKey;
    const dropPos = info.node.props.pos.split('-');
    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

    const loop = (data, key, callback) => {
      data.forEach((item, index, arr) => {
        if (item.key === key) {
          return callback(item, index, arr);
        }
        if (item.children) {
          return loop(item.children, key, callback);
        }
      });
    };
    const data = [...this.state.gData];

    // Find dragObject
    let dragObj;
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });

    if (!info.dropToGap) {
      // Drop on the content
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert 示例添加到尾部，可以是随意位置
        item.children.push(dragObj);
      });
    } else if (
      (info.node.props.children || []).length > 0 // Has children
      && info.node.props.expanded // Is expanded
      && dropPosition === 1 // On the bottom gap
    ) {
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert 示例添加到尾部，可以是随意位置
        item.children.unshift(dragObj);
      });
    } else {
      let ar;
      let i;
      loop(data, dropKey, (item, index, arr) => {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
    }

    this.setState({
      gData: data,
    });
  }

  render() {
    const loop = data => data.map((item) => {
      if (item.children && item.children.length) {
        return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>;
      }
      return <TreeNode key={item.key} title={item.title} IP={item.IP} port={item.port} username={item.username} password={item.password}/>;
    });
    return (
      <Tree
        className="draggable-tree"
        defaultExpandedKeys={this.state.expandedKeys}
        draggable
        onDragEnter={this.onDragEnter}
        onDrop={this.onDrop}
        onSelect={this.treeNodeSelect}
      >
        {loop(this.state.gData)}
      </Tree>
    );
  }
}